import axios from 'axios'
import store from '@/store'
import { Message } from 'element-ui'


// 创建一个自定的axios方法(比原axios多了个基地址)
// axios函数请求的url地址前面会被拼接基地址, 然后axios请求baseURL+url后台完整地址

// 接口和图片资源所在的服务器地址
export const baseURL = 'http://big-event-vue-api-t.itheima.net'
const myAxios = axios.create({
  baseURL
})

// 定义请求拦截器
myAxios.interceptors.request.use(function (config) {
  // 在请求前触发一次
  // 返回给axios内源码，config配置对象(要请求后台的参数都在这个对象上)，根据配置项发起请求
  // console.log(config);

  // 为请求头挂载 Authorization 字段
  if(store.state.token){// vuex中有token在携带
    config.headers.Authorization = store.state.token
  }
  return config
}, function (error) {
  // 请求前发起的代码，如果有异常，会进入这里
  // 返回一个拒绝状态的promise对象
  return Promise.reject(error)
})

// 定义响应拦截器
myAxios.interceptors.response.use(function (response) {
  // 响应状态码为 2xx 时触发成功的回调，形参中的 response 是“成功的结果”
  return response
}, function (error) {
  // 响应状态码不是 2xx 时触发失败的回调，形参中的 error 是“失败的结果”
  if (error.response.status === 401) {
    // 无效的 token
    // 把 Vuex 中的 token 重置为空，并跳转到登录页面
    store.commit('updateToken', '')
    store.commit('updateUserInfo',{})
    // 跳转到登录页面
    router.push('/login')
    // 提示
    Message.error('用户身份已过期')
  }
  return Promise.reject(error)
})

// 导出自定义的axios方法, 供外面调用传参发请求
export default myAxios
